import  { useMemo } from 'react';
import KnowledgeSource from '@/components/ai-chat/KnowledgeSource.js';
import MdRenderer from '@/components/markdown/MdRenderer.js';
import OperationButton from '@/components/ai-chat/component/operation-button/index.jsx';
import LogoIcon from '@/components/logoicon.js';

const AnswerContent = ({
    chatRecord,
    application,
    loading,
    sendMessage,
    chatManagement,
    type
}) => {
    const chatMessage = (question, type, other_params_data) => {
        if (type === 'old') {
            add_answer_text_list(chatRecord.answer_text_list);
            sendMessage(question, other_params_data, chatRecord);
            chatManagement.write(chatRecord.id);
        } else {
            sendMessage(question, other_params_data);
        }
    };

    const add_answer_text_list = (answer_text_list) => {
        answer_text_list.push({ content: '' });
    };

    const answer_text_list = useMemo(() => {
        return chatRecord.answer_text_list.map((item) => {
            if (typeof item === 'string') {
                return { content: item };
            }
            return item;
        });
    }, [chatRecord.answer_text_list]);

    const showSource = (row) => {
        if (type === 'log') {
            return true;
        } else if (row.write_ed && 500 !== row.status) {
            if (type === 'debug-ai-chat' || application?.show_source) {
                return true;
            }
        }
        return false;
    };

    const regenerationChart = (chat) => {
        sendMessage(chat.problem_text, { rechat: true });
    };

    const stopChat = (chat) => {
        chatManagement.stop(chat.id);
    };

    const startChat = (chat) => {
        chatManagement.write(chat.id);
    };

    return (
        <div className="item-content mb-16 lighter">
            {answer_text_list.map((answer_text, index) => (
                
                <div key={index}>
                    <div className="avatar">
                        {application.avatar? (
                            <img src={application.avatar} height="32px" width="32px" />
                        ) : (
                            <LogoIcon height="32px" width="32px" />
                        )}
                    </div>
                    <div className="content">
                            {((chatRecord.write_ed === undefined || chatRecord.write_ed === true) &&!answer_text.content)? (
                                <MdRenderer source=" 抱歉，没有查找到相关内容，请重新描述您的问题或提供更多信息。" />
                            ) : answer_text.content? (
                                <MdRenderer
                                    chat_record_id={answer_text.chat_record_id}
                                    child_node={answer_text.child_node}
                                    runtime_node_id={answer_text.runtime_node_id}
                                    disabled={loading || type === 'log'}
                                    source={answer_text.content}
                                    sendMessage={(question, type, other_params_data) =>
                                        chatMessage(question, type, other_params_data)
                                    }
                                />
                            ) : chatRecord.is_stop? (
                                <MdRenderer source="已停止回答" />
                            ) : (
                                <MdRenderer source="回答中 <span class='dotting'></span>" />
                            )}
                            {showSource(chatRecord) && index === chatRecord.answer_text_list.length - 1 && (
                                <KnowledgeSource data={chatRecord} type={application.type} />
                            )}
                    </div>
                </div>
            ))}
            <div className="content">
                <OperationButton
                    type={type}
                    application={application}
                    chatRecord={chatRecord}
                    onUpdateChatRecord={(event) => {
                        // 这里可以添加相应的处理逻辑
                    }}
                    loading={loading}
                    startChat={(chat) => startChat(chat)}
                    stopChat={(chat) => stopChat(chat)}
                    regenerationChart={(chat) => regenerationChart(chat)}
                />
            </div>
        </div>
    );
};

export default AnswerContent;